<!--菜单设置-->
<template>
  <div class="base-menu">
    <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
      <div slot="title">
        <div class="top-icon">
          <icon-font type="icon-caidan" />
        </div>
        <span>菜单设置</span>
      </div>
      <div slot="extra">
        <a-button type="primary" icon="plus" class="icon-button" @click="clickButton('add')">一级菜单</a-button>
        <a-button type="primary" icon="plus" @click="clickButton('addChild')">子级菜单</a-button>
      </div>
      <!-- 菜单设置表格 -->
      <el-table
        :data="menuTableData"
        highlight-current-row
        border
        row-key="MNU_Id"
        height="100%"
        :row-style="{height:'40px'}"
        :cell-style="{padding:'0px'}"
        :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
        style="width: 100%">
        <slot v-for="(item,index) in menuColumns">
          <el-table-column
            :key="index"
            :property="item.field"
            :label="item.title"
            :width="item.width"
            show-overflow-tooltip
            sortable>
          </el-table-column>
        </slot>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a @click="clickButton('edit', scope.row)">编辑</a>
            <a-divider type="vertical" />
            <a @click="clickButton('del', scope.row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
    </a-card>

    <!-- 菜单设置弹出框 -->
    <a-modal
      :title="modalTitle"
      :maskClosable="false"
      v-model="dialogFormVisible"
      @ok="handleOk">
      <a-form
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        :form="form">
        <a-form-item label="顺序号">
          <a-input type="number" v-decorator="[ 'MNU_Index', {rules: [{ required: true, message: '请输入顺序号' }]} ]" />
        </a-form-item>
        <a-form-item label="菜单名称">
          <a-input v-decorator="[ 'MNU_Caption', {rules: [{ required: true, message: '请输入菜单名称' }]} ]" />
        </a-form-item>
        <a-form-item label="请求路径">
          <a-input v-decorator="[ 'MNU_Key', {rules: [{ required: true, message: '请输入请求路径' }]} ]" />
        </a-form-item>
        <a-form-item label="图标名称">
          <a-select
            allowClear
            placeholder="请选择图标名称"
            v-decorator="[ 'MNU_Icon', {rules: [{ required: true, message: '请选择图标名称' }]} ]"
            @change="handleChange">
            <a-select-opt-group v-for="(item, index) in iconList" :key="index" :label="item.label">
              <a-select-option v-for="list in item.children" :key="list.value" :value="list.value">
                {{ list.label }}
              </a-select-option>
            </a-select-opt-group>
          </a-select>
        </a-form-item>
        <a-form-item label="图标颜色">
          <el-color-picker
            v-decorator="[ 'MNU_Color', {rules: [{ required: true, message: '请选择图标颜色' }], initialValue: '#4189FF'} ]"
            :predefine="predefineColors">
          </el-color-picker>
        </a-form-item>
        <a-form-item label="备注">
          <a-input v-decorator="[ 'MNU_Remark' ]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import pick from 'lodash.pick'
export default {
  name: 'BaseMenu',
  components: {
  },
  data () {
    return {
      menuTableData: [
        {
          MNU_Id: '1',
          MNU_Index: '1',
          MNU_Caption: '首页',
          MNU_Key: 'home',
          MNU_Icon: 'icon-shouye-yes',
          MNU_Color: '#409EFF',
          MNU_Remark: '测试数据'
        },
        {
          MNU_Id: '2',
          MNU_Index: '2',
          MNU_Caption: '系统设置',
          MNU_Key: 'system',
          MNU_Icon: 'icon-shezhi',
          MNU_Color: '#75b0ff',
          MNU_Remark: '测试数据',
          children: [
            {
              MNU_Id: '21',
              MNU_Index: '1',
              MNU_Caption: '数据字典',
              MNU_Key: 'dictionary',
              MNU_Icon: 'icon-shujuzidian',
              MNU_Color: '#29c19a',
              MNU_Remark: '测试数据'
            },
            {
              MNU_Id: '22',
              MNU_Index: '2',
              MNU_Caption: '系统参数',
              MNU_Key: 'systemParameter',
              MNU_Icon: 'icon-xitongcanshu',
              MNU_Color: '#f4b645',
              MNU_Remark: '测试数据'
            },
            {
              MNU_Id: '23',
              MNU_Index: '3',
              MNU_Caption: '全文路径管理',
              MNU_Key: 'pathManage',
              MNU_Icon: 'icon-icon-lujingguanli',
              MNU_Color: '#fb8e8d',
              MNU_Remark: '测试数据'
            }
          ]
        },
        {
          MNU_Id: '3',
          MNU_Index: '3',
          MNU_Caption: '安全管理',
          MNU_Key: 'auth',
          MNU_Icon: 'icon-anquan',
          MNU_Color: '#f9695c',
          MNU_Remark: '测试数据'
        }
      ],
      menuColumns: [
        {
          title: '顺序号',
          field: 'MNU_Index'
        },
        {
          title: '菜单名称',
          field: 'MNU_Caption'
        },
        {
          title: '路径',
          field: 'MNU_Key'
        },
        {
          title: '图标名称',
          field: 'MNU_Icon'
        },
        {
          title: '图标颜色',
          field: 'MNU_Color'
        },
        {
          title: '备注',
          field: 'MNU_Remark'
        }
      ],
      dialogFormVisible: false,
      modalTitle: '',
      form: this.$form.createForm(this),
      iconList: [ // 自定义图标名称
        {
          label: '首页图标',
          children: [
            { value: 'icon-shouye-yes', label: 'icon-shouye-yes' }
          ]
        },
        {
          label: '系统图标',
          children: [
            { value: 'icon-shezhi', label: 'icon-shezhi' },
            { value: 'icon-shujuzidian', label: 'icon-shujuzidian' },
            { value: 'icon-xitongcanshu', label: 'icon-xitongcanshu' },
            { value: 'icon-icon-lujingguanli', label: 'icon-icon-lujingguanli' },
            { value: 'icon-yingshe', label: 'icon-yingshe' },
            { value: 'icon-baoguanxiangicon', label: 'icon-baoguanxiangicon' },
            { value: 'icon-caidan', label: 'icon-caidan' },
            { value: 'icon-shujubiao', label: 'icon-shujubiao' },
            { value: 'icon-quanzong', label: 'icon-quanzong' },
            { value: 'icon-menleitongji', label: 'icon-menleitongji' },
            { value: 'icon-fenlei', label: 'icon-fenlei' },
            { value: 'icon-chuangti', label: 'icon-chuangti' }
          ]
        },
        {
          label: '档案图标',
          children: [
            { value: 'icon-danganjieshou', label: 'icon-danganjieshou' },
            { value: 'icon-401', label: 'icon-401' },
            { value: 'icon-dianziwenjianguanli1', label: 'icon-dianziwenjianguanli1' },
            { value: 'icon-shoujixiang', label: 'icon-shoujixiang' },
            { value: 'icon-shenpi', label: 'icon-shenpi' },
            { value: 'icon-zhuanxiangyanshou', label: 'icon-zhuanxiangyanshou' },
            { value: 'icon-susong', label: 'icon-susong' },
            { value: 'icon-dangan7', label: 'icon-dangan7' },
            { value: 'icon-dangan5', label: 'icon-dangan5' },
            { value: 'icon-dangan6', label: 'icon-dangan6' },
            { value: 'icon-dangan1', label: 'icon-dangan1' }
          ]
        },
        {
          label: '其他图标',
          children: [
            { value: 'icon-jiandingjigou', label: 'icon-jiandingjigou' },
            { value: 'icon-shishibianyan', label: 'icon-shishibianyan' },
            { value: 'icon-zhuanti', label: 'icon-zhuanti' },
            { value: 'icon-baocun_mian', label: 'icon-baocun_mian' },
            { value: 'icon-shujukuguanli', label: 'icon-shujukuguanli' },
            { value: 'icon-wj-xgwj-t', label: 'icon-wj-xgwj-t' },
            { value: 'icon-monitor', label: 'icon-monitor' },
            { value: 'icon-chaxun1', label: 'icon-chaxun1' },
            { value: 'icon-fangwen1', label: 'icon-fangwen1' },
            { value: 'icon-anquan', label: 'icon-anquan' },
            { value: 'icon-danweiyange', label: 'icon-danweiyange' },
            { value: 'icon-sousuo1', label: 'icon-sousuo1' },
            { value: 'icon-gongzuoliu', label: 'icon-gongzuoliu' },
            { value: 'icon-tongji', label: 'icon-tongji' },
            { value: 'icon-huishouzhan', label: 'icon-huishouzhan' },
            { value: 'icon-xinwen1', label: 'icon-xinwen1' },
            { value: 'icon-bangzhu', label: 'icon-bangzhu' }
          ]
        }
      ],
      predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585']
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    clickButton (val, row) {
      switch (val) {
        case 'add':
          this.modalTitle = '一级新增'
          this.dialogFormVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'addChild':
          this.modalTitle = '子级新增'
          this.dialogFormVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'edit':
          this.modalTitle = '菜单编辑'
          this.dialogFormVisible = true
          this.$nextTick(() => { // 表单赋值
            this.form.setFieldsValue(pick(row, ['MNU_Index', 'MNU_Caption', 'MNU_Key', 'MNU_Icon', 'MNU_Color', 'MNU_Remark']))
          })
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    },
    handleChange (value) {
      console.log(`selected ${value}`)
    },
    handleOk () {
      this.form.validateFields((err, values) => {
        console.log(values)
        if (!err) {}
      })
    }
  }
}
</script>
<style lang="less" scoped>
.base-menu {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
}
</style>
